<template>
    <div class="shopContainer">
        <div class="shopingList">
            <div class="mui-content" v-for="(item, i) in catList" :key="i">
                <div class="mui-card">
                    <div class="mui-card-content">
                        <div class="mui-card-content-inner">
                            <mt-switch v-model="$store.getters.getSelected[item.id]" @change="changeSelected(item.id, $store.getters.getSelected[item.id])"></mt-switch>
                            <img :src="item.thumb_path" alt="">
                            <div class="shopDescription">
                                <h3>{{item.title}}</h3>
                                <div class="shopDetail">
                                    <p class="price">￥{{item.sell_price}}</p>
                                    <number-box class="num" :initNum="$store.getters.getIdAcount[item.id]" :goodsId="item.id"></number-box>
                                    <a  @click='remove(item.id, i)'>删除</a>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            </div>


            <!--结算区-->
            <div class="mui-card">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        <div class="payDetai">
                            <p class="total">总计（不含运费）</p>
                            <p class="goodPay">已勾选<span>{{$store.getters.getAllCount}}</span>件商品，总价<span>￥{{$store.getters.getSum.amount}}</span></p>
                        </div>
                        <mt-button type="danger" class="payBtn">去结算</mt-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import numberBox from '../../components/subcomponents/shopCar_num.vue'
    export default {
        data(){
            return {
                catList:[],
                value:true
            }
        },
        created(){
            // console.log(this.$store.getters.getIdAcount[item.id])
            this.getCarList()
        },
        methods:{
            getCarList(){
                let carArr = []
                this.$store.state.car.forEach(item => {
                    carArr.push(item.id)
                })
                if (carArr.length <= 0){
                    return;
                }
                this.$http.get('api/goods/getshopcarlist/'+carArr.join(',')).then(res => {
                    this.catList = res.body.message
                })
            },
            remove(id, index){
                this.catList.splice(index,1)
                this.$store.commit('removeItem',{
                    id: id
                })
            },
            changeSelected(id, selected){

                this.$store.commit('saveSelected',{
                    id: id,
                    selected: selected
                })

            }
        },
        components:{
            'number-box': numberBox
        }
    };

</script>

<style lang="stylus" rel="stylesheet/stylus">
    .shopContainer
        background-color #efeff4
        margin-top: -14px;
        padding-top: 14px;
        padding-bottom: 10px;
        .mui-card-content-inner
            display flex
            align-items: center
            padding 15px 9px
            img
                width 60px
                display: flex;
                margin-right 5px
                margin-left 5px
            .shopDescription
                h3
                    font-size 14px
                .shopDetail
                    display flex
                    align-items: center
                    .price
                        margin-bottom 2px
                        color red
                    .num
                        height 25px
                        margin-left: 8px;
                        margin-right: 8px;
                        font-weight normal
                    a
                        font-weight normal
        .payDetai
            padding-left 5px
            font-size 14px
            font-weight normal
            line-height 20px
            .goodPay span
                font-weight bold
                color red
        .payBtn
            margin 0 0 0 60px;



</style>